<template>
  <li class="v-side-menu-item"
    :style="paddingStyle"
    @click="handleClick"
    :class="{
      'is-active': active,
      'is-disabled': disabled
    }">
    <v-tooltip
      v-if="$parent === rootMenu && rootMenu.collapse"
      effect="dark"
      placement="right">
      <div slot="content"><slot name="title"></slot></div>
      <div style="position: absolute;left: 0;top: 0;height: 100%;width: 100%;display: inline-block;box-sizing: border-box;padding: 0 20px;">
        <slot></slot>
      </div>
    </v-tooltip>
    <template v-else>
      <slot></slot>
      <slot name="title"></slot>
    </template>
  </li>
</template>

<script>
  import Emitter from '@/vuego/mixins/emitter';
  import VTooltip from '@/vuego/components/v-tooltip/v-tooltip';
  import menuMixin from './menu-mixin';

  export default {
    name: 'VSideMenuItem',
    componentName: 'VSideMenuItem',
    mixins: [menuMixin, Emitter],

    props: {
      index: {
        type: String,
        required: true,
      },
      route: {
        type: Object,
        required: false,
      },
      disabled: {
        type: Boolean,
        required: false,
      },
    },
    computed: {
      active() {
        return this.index === this.rootMenu.activeIndex;
      },
    },
    methods: {
      handleClick() {
        this.dispatch('VSideMenu', 'item-click', this);
        this.$emit('click', this);
      },
    },
    created() {
      this.parentMenu.addItem(this);
      this.rootMenu.addItem(this);
    },
    beforeDestroy() {
      this.parentMenu.removeItem(this);
      this.rootMenu.removeItem(this);
    },
    components: {
      [VTooltip.name]: VTooltip,
    },
  };
</script>

